<template>
	<!-- 现场活动 -->
	<view class="">
		<view class="active_top bg-white">
			<image class="big_img" :src="activeryData.info.thumb_img" mode=""></image>
			<view class="p-2">
				<view class="h4">{{ activeryData.info.title || '' }}</view>
				<view class="c_9 font_24 my-1">
					<text class="mr-3">{{ activeryData.info.start_time || '' }}</text>
					<text>{{ activeryData.info.address || '' }}</text>
				</view>
				<view class="flex justify-between c_9 font_24  mt-2">
					<view class="label">
						<text class="label_item p-1" v-for="(item, index) of activeryData.label" v-if="index < 5" :key="item.id">{{ item.bq_name }}</text>
					</view>
					<text v-if="activeryData.info.content" class="text-right" @click="detailShow = true">详情 ></text>
				</view>
				<u-modal :show="detailShow" title="活动详情" confirmText="关闭" @confirm="detailShow = false">
					<view class="slot-content w-100">
						<scroll-view scroll-y="true">
							<view class="u-content" style="max-height: 700rpx;">
								<view v-if="!activeryData.info.content" class="p-2 mt-3"><u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty></view>
								<view class="u-content"><u-parse :content="activeryData.info.content"></u-parse></view>
							</view>
						</scroll-view>
					</view>
				</u-modal>
			</view>
		</view>
		<view>
			<view class="active_bottom my-2 bg-white p-3">
				<view class="data_time  flex justify-around">
					<scroll-view scroll-x="true" show-scrollbar="false" class="scroll_cont">
						<view
							class="tab_item c_9 font_24 p-1 mr-2"
							v-for="(timeTab, index) of timelist"
							:key="index"
							:class="{ active: current == index }"
							@click="tabChange(index, timeTab)"
						>
							{{ timeTab }}
						</view>
					</scroll-view>
				</view>
			</view>

			<view class="px-2 py-1 bg-white">
				<view class="mb-1"><title-view tit="现场活动" :look="false"></title-view></view>
				<u-subsection :list="list" :current="curNow" activeColor="#CF1526" @change="sectionChange"></u-subsection>
				<view v-if="activeryList.length <= 0" class="p-2 mt-3" style="margin: 100rpx auto;">
					<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无活动"></u-empty>
				</view>
				<view class="my-3" v-else><time-axis :dataArray="activeryList" :key="timer"></time-axis></view>
			</view>
		</view>
	</view>
</template>

<script>
import { getZhInfo, activityList } from '@/api/home/nav/activity.js';
import timeAxis from '@/subPages/components/time_axis/time_axios.vue';
import titleView from '@/components/titleView/title.vue';
export default {
	components: { timeAxis, titleView },
	data() {
		return {
			list: ['全部', '未开始', '进行中', '已结束'],
			curNow: 0,
			activeryData: {
				info: {},
				label: {}
			},
			detailShow: false,
			timelist: [],
			activeryList: [],
			current: 0,
			timeDate: '',
			exhibitionId: ''
		};
	},
	onLoad(option) {
		this.exhibitionId = option.exhibitionId;
		// 分享
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	mounted() {
		this.getInfo();
		this.getList();
	},
	methods: {
		sectionChange(index) {
			this.curNow = index;
			this.getList();
		},
		getInfo() {
			// 活动详情
			getZhInfo({ id: this.exhibitionId })
				.then(res => {
					if (res.code == 0) {
						// console.log(res);
						this.activeryData = res.data;
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log('获取活动详情失败', err);
				});
		},
		getList() {
			// 活动列表
			let msg = {
				datatime: this.timeDate,
				id: this.exhibitionId,
				status: this.curNow
			};
			activityList(msg)
				.then(res => {
					if (res.code == 0) {
						// console.log(res);
						this.activeryList = res.data;
						this.timelist = [...new Set(res.timelist)];
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log('获取活动列表失败', err);
				});
		},
		// 点击时间
		tabChange(idx, val) {
			this.current = idx;
			this.timeDate = val;
			this.curNow = 0;
			this.getList();
		}
	}
};
</script>

<style lang="scss" scoped>
.active_top {
	width: 100%;

	.big_img {
		width: 100%;
		height: 300rpx;
		border-radius: 0;
	}

	.label .label_item {
		background: #f2f2f2;
		border-radius: 10rpx;
		margin-right: 10rpx;
	}
}

.data_time {
	.tab_item {
		display: inline-block;
		background-color: $color0;
		border-radius: 10rpx;
	}

	.active {
		color: $color2;
		background-color: $color14;
	}

	.scroll_cont {
		white-space: nowrap;
		width: 100%;
	}
}
</style>
